<template>
  <div class="app-container clipdetail">
    <el-form label-position="top">
      <el-form-item label="默认一级标签：">
        <div>
          <div v-for="(item, index) in list" :key="index" style="margin:0 10px 6px 0;float:left;">
            <el-input v-model="item.title" class="filter-item" style="width: 200px;"/>
            <el-tag :disable-transitions="true" type="danger" style="cursor:pointer;" @click="delitem(index)">删除</el-tag>
            <el-tag v-show="index == list.length-1" :disable-transitions="true" style="cursor:pointer;" @click="additem">新增</el-tag>
          </div>
          <el-tag v-show="list.length==0" :disable-transitions="true" style="cursor:pointer;" @click="additem">新增</el-tag>
        </div>
      </el-form-item>
      <el-form-item label="剪辑生成后是否直接进入素材库">
        <el-radio v-model="is_in" label="1">是</el-radio>
        <el-radio v-model="is_in" label="0">否</el-radio>
      </el-form-item>
      <el-form-item label="剪辑生成后是否需要审核">
        <el-radio v-model="is_audit" label="1">是</el-radio>
        <el-radio v-model="is_audit" label="0">否</el-radio>
      </el-form-item>
    </el-form>
    <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">确定</el-button>
  </div>
</template>
<script>

import BackToTop from '../../../components/BackToTop'
import Pagination from '../../../components/Pagination'
import FileUploader from '../../../components/common/FileUploader'
import Fn from '../../../utils/fn'
import { apiVideo } from '../../../api/clip/task'
import tagButton from '../../../components/common/tagButton'
export default {
  name: 'RadioMeterialTaskList',
  components: { FileUploader, BackToTop, Pagination, tagButton },

  data() {
    return {
      text: '',
      list1: [
        { key: 'default-key', value: [] },
        { key: 'clip-auto-instock', value: '' },
        { key: 'meterial-need-audit', value: '' }
      ],
      list: [],
      is_in: '1',
      is_audit: '0',
      listbox: ['clip-auto-instock', 'default-key', 'meterial-need-audit']
    }
  },
  created() {
    // this.Init()
    this.getList()
  },
  methods: {
    handleCreate: Fn.Debounce(function() {
      const arr = JSON.stringify(this.list.map(item => item.title))
      for (let j = 0; j < this.list1.length; j++) {
        if (this.list1[j].key == 'default-key') {
          this.list1[j].value = arr
        }
        if (this.list1[j].key == 'clip-auto-instock') {
          this.list1[j].value = this.is_in
        }
        if (this.list1[j].key == 'meterial-need-audit') {
          this.list1[j].value = this.is_audit
        }
      }
      apiVideo.setclipcof(this.list1).then(res => {
        if (res.data.resp_code == 0) {
          this.getList()
          this.toast.success(res.data.resp_msg)
        } else {
          this.toast.fail(res.data.resp_msg)
        }
        // this.list = resList.filter(t => ObjectUtil.notNull(t))
      }).finally(() => {
        this.listLoading = false
      })
    }),
    additem() {
      this.list.push({ title: '' })
      console.log(this.list)
    },
    delitem(i) {
      this.list.splice(i, 1)
    },

    getList() {
      apiVideo.getclipcof(this.listbox).then(res => {
        if (res.data.resp_code == 0) {
          // this.list = []
          const result = res.data.datas || []
          if (result.length > 0) {
            result.forEach(item => {
              if (item.key == 'default-key') {
                const temp = JSON.parse(item.value)
                if (JSON.stringify(temp) != '[]') {
                  this.list = temp.map(item => {
                    return {
                      title: item
                    }
                  })
                } else {
                  this.list = []
                }
              }
              if (item.key == 'clip-auto-instock') {
                this.is_in = item.value
              }
              if (item.key == 'meterial-need-audit') {
                this.is_audit = item.value
              }
            })
          } else {
            this.list = []
          }
        } else {
          this.toast.fail(res.data.resp_msg)
        }
        // this.list = resList.filter(t => ObjectUtil.notNull(t))
      }).finally(() => {

      })
    }
  }
}
</script>

<style lang='scss' scoped>
  .clipdetail{
  }
</style>
